<template>
	<!-- 社会化服务 -->
	<view>
		<view class="loading" v-if="loading">
			<u-loading-page :loading="loading"></u-loading-page>
		</view>
		<view class="content" v-else>
			<view class="search justify-center align-center" >
				<u-search margin="0 auto" height="2.5rem" class="u-search" placeholderColor="#999" searchIconSize="18"
					 shape="square" searchIcon="/static/app/search.png" placeholder="请输入搜索内容" @custom="searchFn" v-model="searchText">
				</u-search>
			</view>
			<view class="search-bg"></view>
			<view class="servicesList">
				<view class="item justify-start" v-for="item in servicesList" :key="item.id" @click="toServiceDetail(item.id)">
					<image class="logo" :src="item.picUrl" mode=""></image>
					<view class="text">
						<view class="title">{{item.employName}}</view>
						<view class="text1">{{item.details}}</view>
					</view>
				</view>
			</view>
			<u-loadmore height="5rem" :status="status"></u-loadmore>
		</view>
	</view>
</template>

<script>
import {getServicesList} from '@/api/index/services.js'

export default {
		data() {
			return {
				loading:true,
				searchText: '',
				pageInfo: {
					pageNo: 1,
					pageSize: 12
				},
				servicesList: [],
				status: 'loading'
			}
		},
		onLoad() {
			this.getServicesListFn()
		},
		methods: {
			// 搜索函数
			searchFn(){
				uni.pageScrollTo({
					scrollTop:0,
				})
				this.servicesList=[];
				this.getServicesListFn(this.searchText)
			},
			async getServicesListFn(employName='') {
				let res = await getServicesList({...this.pageInfo,employName});
				if (res.list.length < this.pageInfo.pageSize) {
					this.status = 'nomore'
				}
				res.list.forEach((v)=>{
					if(!v.picUrl){
						v.picUrl='/subPages/static/index/knowledge/item-bg.png'
					}
				})
				this.servicesList = this.servicesList.concat(res.list);
				this.loading=false;
			},
			// 跳转详情页
			toServiceDetail(id){
				uni.navigateTo({
					url:'/subPages/index/servicesDetail/index?id='+id
				})
			}
		},
		onReachBottom() {
			this.pageInfo.pageNo++;
			this.getServicesListFn()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		// #ifdef APP-PLUS
		min-height: 100vh;
		// #endif
		font-size: 1.4rem;
		color: #333;
		background: #F5F5F5;

		.search {
			position: fixed;
			// #ifdef H5
			top:44px;
			// #endif
			// #ifdef APP-PLUS
			top:0rem;
			// #endif
			width: 100%;
			height: 5.4rem;
			padding: 1rem 2rem;
			background: #FFF;
			z-index: 100;

			.u-search {
				background: #FFF;
			}
		}

		.search-bg {
			height:5.4rem;
		}

		.servicesList {
			background: #FFFFFF;
			width: 100%;
			// padding: 1.2rem 0;
			margin-top: 1rem;

			.item {
				padding: .8rem 0 .8rem 1.5rem;

				.logo {
					width: 14rem;
					height: 11rem;
					margin-right: 1rem;
					border-radius: .4rem;
				}

				.text {
					height: 11rem;
					border-bottom: .1rem solid #ddd;
					flex: 1;

					.title {
						width: 19.2rem;
						font-weight: bold;
						margin-bottom: 1rem;
						height: 2rem;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.text1 {
						width: 19.2rem;
						font-size: 1.2rem;
						line-height: 1.95rem;
						height: 8rem;
						word-break: break-all;
						white-space: normal;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 4;
						-webkit-box-orient: vertical;
					}
				}
			}
		}

	}
</style>
